/*
 * @Author: Lin Hongwei
 * @Date: 2022-09-20 21:41:18
 * @LastEditTime: 2022-10-25 21:42:48
 * @LastEditors: Lin Hongwei
 * @email: 1365755396@qq.com
 * @CSDN: https://blog.csdn.net/weixin_45429409
 * @Description: 添加项目模态框
 */
// import { Drawer } from "antd";

// export const ProjectModal = (props: {
//   visible: boolean;
//   onClose: () => void;
// }) => {
//   return (
//     <Drawer open={props.visible} width="100%" onClose={props.onClose}>
//       <h1>添加项目</h1>
//     </Drawer>
//   );
// };

//使用请求参数管理modal的状态
import styled from "@emotion/styled";
import { Button, Drawer, Form, Input, Spin } from "antd";
import { useForm } from "antd/lib/form/Form";
import { useEffect } from "react";
import { useAddProject, useEditProject } from "../../api/project";
import { ErrorBox } from "../../components/ErrorBox";
import { UserSelect } from "../../components/user-select";
import { useProjectModal, useProjectQueryKey } from "./util";

export const ProjectModal = () => {
  const { visible, close, projectDetailData, isLoading } = useProjectModal();

  const useMutateProject = projectDetailData ? useEditProject : useAddProject; //编辑和添加请求函数
  const {
    mutateAsync,
    error,
    isLoading: isEditLodaing,
  } = useMutateProject(useProjectQueryKey());

  const closeModal = () => {
    form.resetFields();
    close();
  };
  const [form] = useForm();
  const onChangeFormFinish = (formValue: any) => {
    mutateAsync({ ...projectDetailData, ...formValue }).then(() =>
      closeModal()
    );
  };

  useEffect(() => {
    form.setFieldsValue(projectDetailData);
  }, [projectDetailData, form]);

  return (
    <Drawer open={visible} width="100%" onClose={closeModal} forceRender={true}>
      <DrawerContextContainer>
        {isLoading ? (
          <Spin size="large" />
        ) : (
          <>
            <h1>{projectDetailData ? "编辑项目" : "创建项目"}</h1>
            <ErrorBox error={error} />
            <Form
              form={form}
              style={{ width: "40rem" }}
              layout="vertical"
              onFinish={onChangeFormFinish}
            >
              <Form.Item
                name="name"
                label="名  称"
                rules={[{ required: true, message: "请输入项目名称" }]}
              >
                <Input placeholder="请输入项目名称" />
              </Form.Item>
              <Form.Item
                name="group"
                label="部  门"
                rules={[{ required: true, message: "请输入部门名称" }]}
              >
                <Input placeholder="请输入部门名称" />
              </Form.Item>
              <Form.Item
                name="personId"
                label="负责人"
                rules={[{ required: true, message: "请选择负责人" }]}
              >
                <UserSelect />
              </Form.Item>
              <Form.Item style={{ textAlign: "right" }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  loading={isEditLodaing}
                >
                  保存
                </Button>
              </Form.Item>
            </Form>
          </>
        )}
      </DrawerContextContainer>
    </Drawer>
  );
};

const DrawerContextContainer = styled.div`
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;
